import {
  DrawerForm,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Input, Space, Tabs } from 'antd';
const { Search } = Input;
import React, { useRef, useState } from 'react';
import { dyCpsSearchStore } from '../service';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const [brands, setBrands] = useState<any>([]);
  return (
    <DrawerForm
      title="新建店铺"
      width="620px"
      formRef={formRef}
      visible={props.updateModalVisible}
      onVisibleChange={(val) => {
        if (!val) {
          props.onCancel();
        }
       
      }}
      onFinish={async (val) => {
        props.onSubmit({ ...val });
      }}
    >
      <Search
        placeholder="输入店铺名称"
        width="md"
        style={{ paddingBottom: 20 }}
        enterButton="搜索"
        size="large"
        onSearch={async (val) => {
          const rsp = await dyCpsSearchStore({ name: val });
          // console.log(rsp);
          if (rsp.code === 'SUCCESS') {
            setBrands(rsp.data);
          }
        }}
      />
     {brands.length > 0 ? <ProFormSelect
        name="name"
        width="md"
        label="店铺选择"
        request={async () => {
          return brands;
        }}
        placeholder="请选择店铺"
        rules={[{ required: true, message: 'Please select your country!' }]}
      /> : ''}
      <ProFormText
        width="md"
        name="amount"
        label="阈值金额"
        tooltip="最长为 24 位"
        placeholder="请输入阈值金额"
        rules={[{ required: true, message: '阈值金额不能为空!' }]}
      />
    {/* <ProFormSwitch name="status" label="上线状态" /> */}
      <ProFormTextArea
        width="md"
        name="mobiles"
        label="手机号"
        tooltip="最长为 11 位"
        placeholder="请输入手机号,用逗号分割"
        rules={[{ required: true, message: '手机号称不能为空!' }]}
      />
      
    </DrawerForm>
  );
};

export default UpdateForm;
